<!-- 区县组件的封装 -->
<template>
  <el-select placeholder="请选择区县" v-model="currentValue" :popper-append-to-body="false">
    <el-option v-for="(item,index) in optionList" :key="index" :label="item.name" :value="item.val">
    </el-option>
  </el-select>
  <!-- 父组件调用 -->
  <!-- <QXSelect :value="query.area" @parentEvent="getQXChild" ref="QXDome"></QXSelect> -->
</template>
<script>
import { getArea } from '@/api/index';
export default {
  name: 'qx-select',
  // 组件 v-model 值通过 props 传入，必须定义为 value
  props: {
    value: {
      type: [String, Array, Number]
    },
  },
  // props: ['value'],
  data () {
    return {
      optionList: [],
      // 将传入的 value 在 data 中重新定义赋值，以便子组件改变值（子组件中不能直接修改 props 中的值）
      currentValue: this.value,
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.getArea()
  },
  // 监听 value：使 value 能在初始化时有值，监听 data（currentValue）：使子组件修改值通知给父组件同步（重要）
  watch: {
    value (newVal) {
      this.currentValue = newVal;
    },
    currentValue (newVal, oldVal) {
      if (newVal !== oldVal) {
        // 子组件通过$$emit 给父组件派发事件
        this.$emit('parentEvent', this.currentValue)
      }
    }
  },
  methods: {
    /**
     * 根据系统参数查询下拉数据
     */
    getArea () {
      getArea().then(res => {
        this.optionList = res.data
      })
    },
    /**
    * 清空内容
    */
    clearContent () {
      this.currentValue = '';
    }
  }
}
</script>
<style scoped>
</style>